.control {
  display: block;
  width: 100%;
  padding: var(--mantine-spacing-sm) var(--mantine-spacing-lg);
  border-radius: var(--mantine-radius-md);

  @mixin hover {
    &:not([data-active]) {
      background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
    }
  }

  &[data-active] {
    @mixin light {
      color: var(--mantine-color-blue-8);
      background-color: var(--mantine-color-blue-0);
    }

    @mixin dark {
      color: var(--mantine-color-blue-1);
      background-color: rgba(24, 100, 171, 0.45);
    }
  }
}

.name {
  display: block;
  font-weight: 500;
  color: inherit;
}

.description {
  display: block;
  opacity: 0.6;
  font-size: var(--mantine-font-size-sm);
  color: inherit;
}

.menuButton {
  @mixin not-rtl {
    padding-right: 5px;
  }

  @mixin rtl {
    padding-left: 5px;
  }
}
